<template>
  <div class="qualiy_list">
    <div class="monitor-tree">
      <h3 class="tree-title">选择洞幅</h3>
      <el-tree
          :data="tunnelInfoChild"
          @check-change="treeCheckClick"
          :default-expanded-keys="keysListNodeData"
          :check-on-click-node="true"
          node-key="pid"
          ref="tree"
          @node-click="nodetest"
      ></el-tree>
    </div>
    <div class="monitor-list">
      <erHeader/>
      <el-table  :data="projectInfo" @row-click="clikeRow" :cell-style="{'text-align':'center'}" :header-cell-style="{textAlign: 'center'}">
        <el-table-column  width="190"  show-overflow-tooltip prop="reportNo" label="报告编号"></el-table-column>
        <el-table-column  show-overflow-tooltip prop="startMileage" label="开始里程"></el-table-column>
        <el-table-column  show-overflow-tooltip prop="endMileage" label="结束里程"></el-table-column>
        <el-table-column  show-overflow-tooltip prop="mileageLength" label="检测长度(米)"></el-table-column>
        <el-table-column  show-overflow-tooltip prop="mileageContext" label="检测内容"></el-table-column>
        <el-table-column  show-overflow-tooltip prop="result" label="检测结果">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.result == 2" type="warning">不合格</el-tag>
            <el-tag v-if="scope.row.result == 1" type="success">合格</el-tag>
          </template>
        </el-table-column>
        <el-table-column  :formatter="formatDate"  show-overflow-tooltip prop="createTime" label="报告日期"></el-table-column>
        <el-table-column width="260" show-overflow-tooltip label="操作">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="primary"
              icon="el-icon-search"
              @click="preview(scope.$index, scope.row)"
            >查看</el-button>
            <el-button
              size="mini"
              type="info"
              icon="el-icon-edit"
              @click="handleEdit(scope.$index, scope.row)"
            >编辑</el-button>
            <el-button
              size="mini"
              type="danger"
              icon="el-icon-delete"
              @click="handleDelete(scope.$index, scope.row)"
            >删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <div class="block">
        <el-pagination
            @current-change="handleCurrentChange"
            layout="total, sizes, prev, pager, next, jumper"
            :total="currentPage.total"
        ></el-pagination>
      </div>
      <!-- 分页 -->
    </div>
    <erEditor :flag="flag"/>
    <el-dialog :visible="isVisible" :before-close="handleClose" fullscreen>
      <pdfTemp :pdfsrc="pdfsrc" />
    </el-dialog>
  </div>
</template>

<script>
import api from '../../../api'
import base from '../../../api/base'
import qs from 'qs'
import erEditor from './erEditor.vue'
import erHeader from './erHeader.vue'
import {mapState} from 'vuex'
import pdfTemp from "../../pdf/pdf.vue";
export default {
  data() {
    return {
      keysListNodeData:[],
      wId: '', // 洞幅id
      tunnelInfoChild: [],
      projectInfo: [],
      src: null,
      pageNum: 1,
      flag: false,
      currentPage: {
        pageNo: 1,
        total: 0
      },
      isVisible: false,
      pdfsrc: "",

    }
  },
  components: {
    erEditor,
    erHeader
  },
  computed: {
    ...mapState('AddrPlaneModule', ['tunName']),
    tunNameChange() {
      return this.tunName
    }
  },
  mounted() {
    this.getchildren()
    this.$bus.$on('onerRefresher', (flag) => {
      this.http(this.currentPage.pageNo, flag.wId)
    })
    this.$bus.$on('onAdderListShow', (flag) => {
      this.projectInfo = flag
    })
  },
  methods: {
    //获取数结构
    getchildren() {
      api
          .tunnelWidthFindByClid()
          .then((res) => {
            if (res.data.code == 2001) {
              this.tunnelInfoChild = res.data.data
              const arrDat = res.data.data[0].pid
              this.keysListNodeData.push(arrDat)
            }
          })
          .catch((error) => {
            console.log(error)
          })
    },
    http(page, wId ,tId) {
      api
          .monitorMeasurepageList({page, wId, testType: '二衬检测' ,tId})
          .then((res) => {
            if (res.data.code == 2001) {
              this.projectInfo = res.data.data.records
              this.currentPage.total = parseInt(res.data.data.total)
            }
          })
          .catch((error) => {
            console.log(error)
          })
    },
    handleEdit(index, row) {
      this.$bus.$emit('onShowerEditor', {pageNo:this.currentPage.pageNo,rowdata: row, wId: this.wId})
    },
    handleDelete(index, row) {
      let data = {
        id: row.id
      }
      this.$confirm('此操作将永久删除改二衬检测报告, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        customClass: 'del-model',
        type: 'warning'
      })
          .then(() => {
            api
                .monitorMeasuredeleteById(qs.stringify(data))
                .then((res) => {
                  if (res.data.code == 2001) {
                    this.$message({
                      type: 'success',
                      message: '删除成功!'
                    })
                    // 视图重绘
                    this.http(1)
                  } else {
                    this.$message({
                      type: 'fail',
                      message: '删除失败!'
                    })
                  }
                })
                .catch((err) => {
                  console.log(err)
                })
          })
          .catch(() => {
            this.$message({
              type: 'info',
              message: '已取消删除'
            })
          })
    },
    preview(index, row) {
      if(row.resources == ''){
         this.$message({
                  type: 'fail',
                  message: '附件为空!'
                })
      }else{
       this.pdfsrc = base.filebaseUrl + row.resources
       this.$router.push('/pdf/' + encodeURIComponent(this.pdfsrc))
      }
    },
    treeCheckClick(data, checked, node) {
      if (data.id != undefined) {
        this.wId = data.id
        this.http(1, this.wId)
        this.$bus.$emit('onAdderWid', this.wId)
      }
    },
    formatDate(row, column) {
      // 获取单元格数据
      let data = row[column.property]
      if (data == null) {
        return null
      }
      let dt = new Date(data)
      return dt.getFullYear() + '-' + (dt.getMonth() + 1) + '-' + dt.getDate()
    },
    nodetest(data, checked, node){
      if (data.tid != undefined) {
        this.http(1,null,data.tid)
      }
    },// 关闭
    handleClose() {
      this.isVisible = false;
    },
  }
}
</script>

<style scoped>

.tree-title {
  text-align: left;
  font-size: 16px;
  color: #606266;
  padding: 10px;
  padding-bottom: 20px;
}

.monitor-tree {
  width: 300px;
  border-left: 1px solid #f1f1f1;
  border-right: 1px solid #f1f1f1;
  background-color: #fff;
}

.monitor-list {
  flex: 1;
  margin-left: 10px;
  width: 100%;
}
</style>